<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:任务实例详情日志组件
* @fileName:log.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-13
!-->

<script setup lang="ts">
import { showErrorMessage } from "@/common/message";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
//引入API封装方法
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  logParam: Object as any,
});
//详情数据
const listData = reactive({
  logData: [] as any,
  total: 0,
});

/**
 * @description: 无限滚动
 * @return void
 */
const load = () => {
  reqLogList();
};
// 定义请求数据
let reqData = {
  page: 0,
};

/**
 * @description: 获取日志
 * @return void
 */
const reqLogList = () => {
  const res = proxy.$HTTP.post({
    url: `/task/instance/incrLog`,
    params: {
      page: reqData.page,
      size: 100,
    },
    data: {
      taskInstanceId: props.logParam.id,
      taskPlanId: props.logParam.taskPlanId,
    },
  });
  res.then((res: any) => {
    if (res.data.log === "") {
      return;
    } else {
      reqData.page = res.data.seek;
      res.data.log
        .replace(/\n/g, "<br/>")
        .split("<br/>")
        .forEach((log: any) => {
          listData.logData.push(log);
        });
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};
onMounted(() => {
  reqLogList();
});

const onDownloadButtonClick = () => {
  if (props.logParam.id && props.logParam.taskPlanId) {
    window.open(
      `${
        import.meta.env.VITE_API_BASE_URL
      }/task/instance/downloadIncrLog?taskInstanceId=${
        props.logParam.id
      }&taskPlanId=${props.logParam.taskPlanId}`,
      "_blank"
    );
  }
};
</script>

<template>
  <div class="log">
    <div class="logContent">
      &emsp;&emsp;日志级别 <span>{{ props.logParam.logLevel }}</span
      ><el-button
        class="btn-download"
        type="primary"
        @click="onDownloadButtonClick"
        >日志下载</el-button
      >
    </div>
    <div class="logImg">
      <ul
        v-infinite-scroll="load"
        infinite-scroll-immediate="false"
        class="infinite-list"
      >
        <li
          v-for="(content, index) in listData.logData"
          :key="index"
          class="infinite-list-item"
        >
          {{ content }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
}
.log {
  width: 100%;
  padding-top: 20px;
  .logContent {
    width: 700px;
    height: 60px;
    line-height: 60px;
    font-family: PingFang SC;
    color: #000000;
    overflow: hidden;
    // padding-left: 15px;
    font-size: 14px;
    margin-bottom: 10px;
    background-color: #f6f6f6;
    span {
      font-family: PingFang SC;
      font-weight: 700;
      color: #5473e6;
      margin-left: 20px;
      font-size: 18px;
    }
    .btn-download {
      float: right;
      margin-top: 15px;
      margin-right: 20px;
    }
  }
  .logImg {
    width: 700px;
    height: 580px;
    overflow-x: hidden;
    // margin-top: 10px;
    background-color: #f6f6f6;
    .infinite-list {
      // height: 550px;
      padding: 15px;
      margin: 0;
      list-style: none;
    }
    .infinite-list .infinite-list-item {
      display: flex;
      align-items: center;
    }
    .infinite-list .infinite-list-item + .list-item {
      margin-top: 15px;
    }
  }
}
:deep(.el-dialog__header) {
  width: 700px;
  border-bottom: 1px solid #dedede;
}
</style>
